<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="70px" v-loading="btnload">
        <el-form-item label="配置名">
            <span>{{form.name}}</span>
        </el-form-item>
        <el-form-item prop="value" label="配置值" v-if="pdata.type == 1">
            <number-dom v-model="form.value" :limit="pdata.limit"/>
        </el-form-item>
        <el-form-item prop="value" label="配置值" v-else-if="pdata.type == 2">
            <time-dom v-model="form.value" :limit="pdata.limit"/>
        </el-form-item>
        <el-form-item prop="value" label="配置值" v-else>
            <el-input type="textarea" :maxlength="250" :rows="5" v-model="form.value"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import timeDom from "./timeRange";
    import numberDom from "./number";
    import {configValue} from "@/api";

    export default {
        data() {
            return {
                rules: {
                    value: [
                        {required: true, message: '配置值不能为空', trigger: 'blur'}
                    ]
                }
                , btnload: false
                , form: {}
            }
        }
        , props: ['pdata']
        , components: {timeDom, numberDom}
        , mounted() {
            if (this.pdata != null) {
                this.form = {
                    id: this.pdata.id,
                    name: this.pdata.option_name,
                    value: this.pdata.option_value
                };
            } else {
                this.form = {
                    name: '',
                    value: ''
                };
            }
        }
        , methods: {
            submit() {
                this.$submit(this.$refs['form'], () => {
                    this.btnload = true;
                    configValue(this.form, () => {
                        this.$message.success('操作成功');
                        this.$emit('close', true)
                    }, () => {
                        this.btnload = false;
                    })
                });
            }
        }
    }
</script>
